<template>
    <div class="equipment">
        <!-- 设备信息 -->
        <div class="lefts">
            <div class="name">
                <img src="@/assets/img/ic_she@2x.png" alt="">
                <div>
                    <h3> {{ deviceName }}</h3>
                    <p> 设备名称</p>
                </div>
            </div>
            <div class="status">
                <div class="ones">
                    <img v-if="deviceName" src="@/assets/img/ic_lian@2x.png" alt="">
                    <img v-else src="@/assets/img/ic_lian_dis@2x.png" alt="">
                    <div>
                        <h3>
                            <span class="sp1" v-if="deviceName">正常</span>
                            <span class="sp2" v-else>离线</span>
                        </h3>
                        <p>链接状态</p>
                    </div>
                </div>
                <div class="ones">
                    <img v-if="deviceName" src="@/assets/img/ic_zhuang@2x.png" alt="">
                    <img v-else src="@/assets/img/ic_zhuang_dis@2x.png" alt="">
                    <div>
                        <h3>
                            <span class="sp1" v-if="deviceName">正常</span>
                            <span class="sp2" v-else>未工作</span>
                        </h3>
                        <p>设备状态</p>
                    </div>
                </div>
                <div class="ones">
                    <img v-if="deviceName" src="@/assets/img/ic_shi@2x.png" alt="">
                    <img v-else src="@/assets/img/ic_shi_dis@2x.png" alt="">
                    <div>
                        <h3>
                            <span class="sp1" v-if="deviceName">是</span>
                            <span class="sp2" v-else>否</span>
                        </h3>
                        <p>实时情况</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 温度 -->
        <div class="rights">
            <ul class="temperature">
                <li v-for="(item, index) in frontlist" :key="index">
                    <h3><span></span> {{ item.title }}</h3>
                    <div>
                        {{ item.num }}
                    </div>
                </li>
            </ul>

        </div>
    </div>
</template>
<script lang="ts" setup> 
import { ref } from 'vue'
import { storeToRefs } from 'pinia' 
import useMainStore from '@/store/main/main'
const systemStore = useMainStore()  
systemStore.getFrontDataActive() 
// systemStore.getBottomData()
const { frontlist } = storeToRefs(systemStore) 
const deviceName=ref('PYROVIEW_C1290338')

</script>

<style></style>